<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/echarts.js"></script>
        <style>
            #main {
                width: 1000px;
                height: 500px;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>
    </body>
    <script>
        var chartDom = document.getElementById('main')
        var myChart = echarts.init(chartDom)
        var option,
            wData = ['0k', '', '15.9k', '', '31.7k', '', '47.6k', '', '63.4k'],
            option = {
                legend: {
                    show: true,
                    data: ['我方', '敌方', '经济差'],
                    bottom: 0,
                },
                title: {
                    text: '双方经济差',
                    left: 'center',
                    top: 0,
                },
                grid: {
                    show: true,
                    top: 50,
                    left: 50,
                    right: 50,
                    bottom: 50,
                    containLabel: true,
                },
                tooltip: {
                    formatter: 'Group {a}: ({c})',
                },
                xAxis: {
                    type: 'time',
                    gridIndex: 0,
                    axisLabel: {
                        formatter: function (val) {
                            if (val == 30) {
                                return '7:00'
                            }
                        },
                        interval: 1,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid', //y轴分割线类型
                            color: '#e5eaf4',
                            width: 1,
                        },
                    },
                },
                yAxis: {
                    min: 0,
                    max: 63.4,
                    axisLabel: {
                        formatter: function (val, index, values) {
                            return wData[index]
                        },
                    },
                },
                series: [
                    {
                        name: '我方',
                        type: 'line',
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        data: [0, 7.5, 15.9, 25.152, 31.7, 43.2, 47.6],
                        areaStyle: {
                            color: 'blue',
                        },
                        z: 3,
                    },
                    {
                        name: '敌方',
                        type: 'line',
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        z: 2,
                        data: [0, 7.5, 15.6, 28.022, 28.6, 39.82, 56.2],
                        areaStyle: {
                            color: 'red',
                        },
                    },
                    {
                        name: '经济差',
                        type: 'line',
                        data: ['', '', '', '1K', '', '', ''],
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[1]
                            },
                        },
                    },
                ],
            }

        option && myChart.setOption(option)
    </script>
</html>
